<template>
  <div class="aui-padded-10" v-if="phb_show && items.invite_rank && items.invite_rank.length > 0">
    <section class="phb">
        <div class="title aui-ftn20  aui-text-center">
            本月排行榜前十奖励
        </div>
        <div class="tag aui-ftn12 aui-text-center aui-text-f">最高奖励红包{{items.reward}}元</div>
        <van-row class="box">
            <div class="img-lt"></div>
            <div class="img-rt"></div>
            <van-col span="12" class="list one" @click="fnState(0)">
                <div class="list-cont">
                    <div class="header">
                        <div class="l_title"></div>
                        <div class="more"></div>
                    </div>
                    <div class="content">
                        <div class="item" v-for="(item, index) in items.invite_rank" :key="index">
                            <div class="img">
                                <img :src="require('../../../assets/index/phb_'+index+'.png')" alt="">
                            </div>
                            <div class="cont">
                                <div class="number" v-text="item.mobile"></div>
                                <div class="p">邀请:{{item.num}}人</div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-col>
            <van-col span="12" class="list two" @click="fnState(1)" v-if="phb_show" v-cloak>
                <div class="list-cont">
                    <div class="header">
                        <div class="l_title"></div>
                        <div class="more"></div>
                    </div>
                    <div class="content">
                        <div class="item" v-for="(item, index) in items.order_rank" :key="index">
                            <div class="img">
                                <img :src="require('../../../assets/index/phb_'+index+'.png')" alt="">
                            </div>
                            <div class="cont">
                                <div class="number" v-text="item.mobile"></div>
                                <div class="p">做单:{{item.count}}单</div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-col>
        </van-row>
    </section>
  </div>
</template>

<script>
  import home from "../../../service/home.js"
  export default {
      name: 'phb',
    data () {
      return {
        width: (document.documentElement.clientWidth - 30) / 4,
        items: {invite_rank: [], order_rank: []},
        clickFlag: false,
        phb_show: false
      }
    },
    mounted() {
      this.fnInitPhb()
      this.fnGetData()
    },
    methods: {
      fnInitPhb: function() {
        home.fnShowPhb({}).then(res => {
          if (res) {
            this.phb_show = res.status ? false : true;
          }
        })
      },
      fnGetData: function () {
        home.fnGetPhb({}).then(res => {
          if (res && res.status) {
            this.items = res;
          }
        })
      },
      fnState: function(index) {
         this.utils.fnOpenCommon(this, {name:'phb', params: {index: index, show: this.phb_show}})
      }
    }
  }
</script>

<style>

</style>
